<template>
	<div>
		<!-- 标题 -->
		<div class="title">当前定位</div>
		<!-- 描述地址 -->
		<div class="desc">
			<!-- bootstrap文字图标 -->
      <i class="fa fa-location-arrow"></i>
			<span>{{address}}</span>
		</div>
	</div>
</template>

<script>
	export default {
		name: "Location",
		// https://cn.vuejs.org/v2/guide/components-props.html#%E4%BC%A0%E9%80%92%E9%9D%99%E6%80%81%E6%88%96%E5%8A%A8%E6%80%81-Prop
		props: {
			address: String
		}
	}
</script>


<style scoped>
.title {
	/* 标题上下边距 */
	margin: 10px 0;
	font-size: 12px;
}

.desc i {
	/* 文字图标变为蓝色 */
	color: #009eef;
}

.desc span {
	/* 文字颜色+文字粗细+块级内联+宽度90%（减去address.vue的city_search定义了padding的90%）+省略多余文字 */
	color: #333;
	font-weight: bold;
	margin-left: 5px;
	display: inline-block;
	width: 90%;
	overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
</style>